import React, { FC } from 'react'
import useLoadQuestionData from '@/hooks/useLoadQuestionData'
import { useDispatch } from 'react-redux'
import styles from './Edit.module.scss'
import EditCanvas from './EditCanvas'
import LeftPanel from './LeftPanel'
import RightPanel from './RightPanel'
import { changeSelected } from '@/store/componentsReducer'
import EditHeader from './EditHeader'
const Edit: FC = () => {
  useLoadQuestionData()
  const dispatch = useDispatch()
  const handelClear = () => {
    dispatch(changeSelected(''))
  }
  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <EditHeader />
      </div>
      <div className={styles.main}>
        <div className={styles.left}>
          <LeftPanel />
        </div>
        <div className={styles.content} onClick={handelClear}>
          <div className={styles.canvasBox}>
            <EditCanvas />
          </div>
        </div>
        <div className={styles.right}>
          <RightPanel />
        </div>
      </div>
      <div className={styles.footer}>底部</div>
    </div>
  )
}

export default Edit
